<template>
	<div class="px-12 bg-bg-1 rounded-md flex text-t-4 text-sm">
		<div class="max-w-[1390px] flex-col mx-auto w-full">
			<div class="w-full flex-1 flex pt-[14px] leading-[26px] mb-[30px]">
				<div class="flex-1 flex flex-col text-base">
					<div class="text-[16px] leading-[24px] mb-[24px] text-t-1">{{ $t('app.games') }}</div>
					<base-router name="casino" class="text-t-2 mb-[20px]">
						{{ $t('app.casinoHomePage') }}
					</base-router>
					<base-router name="sports" class="text-t-2 mb-[20px]">
						{{ $t('app.sportHomePage') }}
					</base-router>
					<base-router name="games" class="text-t-2 mb-[20px]">
						{{ $t('casinoAll.2up') }}
					</base-router>
					<base-router name="slots" class="text-t-2 mb-[20px]">{{ $t('slots.title') }}</base-router>
					<base-router name="casino" class="text-t-2 mb-[20px]">
						{{ $t('casinoAll.title') }}
					</base-router>
					<base-router name="casinoProvider" class="text-t-2">
						{{ $t('casinoAll.providers') }}
					</base-router>
				</div>
				<div class="flex-1 flex flex-col text-base">
					<div class="text-[16px] leading-[24px] mb-[24px] text-t-1">{{ $t('app.promotion') }}</div>
					<base-router name="vip" class="text-t-2 mb-[20px]">
						{{ $t('activity.vip-rewards') }}
					</base-router>
					<base-router name="agent" class="text-t-2 mb-[20px]">{{ $t('agent.title') }}</base-router>
					<base-router name="race" class="text-t-2">{{ $t('race.title') }}</base-router>
				</div>
				<div class="flex-1 flex flex-col text-base">
					<div class="text-[16px] leading-[24px] mb-[24px] text-t-1">{{ $t('app.help') }}</div>
					<div class="app-text-react text-t-2 mb-[20px]" @click="customerService()">
						{{ $t('app.waiter') }}
					</div>
					<a :href="HELP_URL" class="text-t-2 no-underline mb-[20px]" target="_blank">
						{{ $t('app.guide') }}
					</a>
					<a :href="GAMEBLE_AWARE" class="text-t-2 no-underline" target="_blank">
						{{ $t('app.gambleAware') }}
					</a>

					<!-- <div
						class="app-text-react"
						@click="goLicense"
						id="anj-94f6c769-fa1c-4f4d-ae55-bc16f777ee98"
						data-anj-seal-id="94f6c769-fa1c-4f4d-ae55-bc16f777ee98"
						data-anj-image-size="32"
						v-show="false"
						data-anj-image-type="basic-small">
						{{ $t('app.lisence') }}
					</div>
					<div class="app-text-react" @click="goLicense">
						{{ $t('app.lisence') }}
					</div> -->
				</div>
				<div class="flex-1 flex flex-col text-base">
					<div class="text-[16px] leading-[24px] mb-[24px] text-t-1">{{ $t('tip.info') }}</div>
					<a :href="TERMS_OF_SERVICE_URL" class="text-t-2 no-underline mb-[20px]" target="_blank">
						{{ $t('app.termsOfService') }}
					</a>
					<a :href="PRIVACY_POLICY_URL" class="text-t-2 no-underline mb-[20px]" target="_blank">
						{{ $t('app.privacyPolicy') }}
					</a>
					<a :href="TERMS_OF_SERVICE_URL" class="text-t-2 no-underline mb-[20px]" target="_blank">
						{{ $t('app.moneyLaundering') }}
					</a>
					<a :href="PRIVACY_POLICY_URL" class="text-t-2 no-underline mb-[20px]" target="_blank">
						{{ $t('app.fairLicence') }}
					</a>
					<a :href="LICENSE_URL" class="text-t-2 no-underline" target="_blank">
						{{ $t('app.licence') }}
					</a>
				</div>
				<div class="flex-1">
					<div class="text-base leading-[24px] text-t-1 mb-[24px]">{{ $t('app.social') }}</div>
					<div class="flex mb-5">
						<a :href="TIKTOK_URL" class="flex mr-2" target="_blank">
							<base-image src="social/telegram.svg"></base-image>
						</a>
						<a :href="X_URL" class="flex" target="_blank">
							<base-image src="social/x-square.svg"></base-image>
						</a>
					</div>
					<base-popselect
						v-model="appStore.lang"
						size="small"
						:options="getLangList()"
						selected-class="w-[130px] h-7 rounded-sm bg-bg-3 flex justify-between items-center px-2 text-t-2"></base-popselect>
					<div class="h-2"></div>
					<base-popselect
						:model-value="appStore.odds"
						size="small"
						:options="oddsList"
						@update:model-value="onOddsChange"
						selected-class="w-[130px] h-7 rounded-sm bg-bg-3 flex justify-between items-center px-2 text-t-2">
						<div>
							{{ $t('app.odds') }}:
							<span class="text-primary">{{ getOddsCode(appStore.odds) }}</span>
						</div>
					</base-popselect>
				</div>
			</div>
			<div class="mb-[8px]">
				<div class="mb-[12px]">
					<router-link :to="{ name: 'home', params: { locale: locale } }">
						<base-image src="logo.svg" class="h-8 mr-2"></base-image>
					</router-link>
					<app-lisence class="mr-2 h-[30px] w-[30px]" :type="LisenceType.Anjouan" />
					<base-image src="age18.svg" class=""></base-image>
				</div>
				<p>
					{{ $t('app.footerAddress') }}
				</p>
			</div>
			<div class="h-9 flex items-center border-t border-border-1 justify-between mb-[12px]">
				<div>1BTC = $61,312.08</div>
				<div class="flex items-center">
					<div>
						{{ $t('app.customerService') }}:
						<a class="link" :href="`mailto:${MAIL_CUSTOMER}`">{{ MAIL_CUSTOMER }}</a>
					</div>
					<div class="bullet"></div>
					<div>
						{{ $t('app.agent') }}:
						<a class="link" :href="`mailto:${MAIL_AFFILIATE}`">{{ MAIL_AFFILIATE }}</a>
					</div>
					<div class="bullet"></div>
					<div>
						{{ $t('app.partner') }}:
						<a class="link" :href="`mailto:${MAIL_PARTNER}`">{{ MAIL_PARTNER }}</a>
					</div>
				</div>
				<div class="flex items-center">{{ COPYRIGHT }} | {{ $t('app.allRightReserve') }}</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseImage, BasePopselect, BaseRouter } from '@/components/base'
import AppLisence from '../app-lisence/index.vue'
import { COPYRIGHT } from '@/constants'
import { useAppStore } from '@/store'
import { LisenceType, Odds } from '@/enums'
import { computed, onMounted } from 'vue'
import { getLangList, enumList, getOddsCode, customerService } from '@/utils'
import {
	HELP_URL,
	TIKTOK_URL,
	X_URL,
	LICENSE_URL,
	PRIVACY_POLICY_URL,
	TERMS_OF_SERVICE_URL,
	GAMEBLE_AWARE,
	MAIL_PARTNER,
	MAIL_CUSTOMER,
	MAIL_AFFILIATE
} from '@/constants'
const appStore = useAppStore()
const locale = appStore.lang

const oddsList = computed(() => enumList(Odds))

const onOddsChange = (val: any) => appStore.setOdds(val)

onMounted(() => {
	// const currentWin = window as any
	// currentWin.anj_94f6c769_fa1c_4f4d_ae55_bc16f777ee98.init()
	// if (currentWin.__anj.jump) {
	// 	goLicense()
	// }
})
</script>
<style>
.bullet {
	width: 5px;
	height: 5px;
	background-color: var(--color-bg-5);
	border-radius: 100%;
	margin: 0 20px;
}
</style>
